<template>
	<com-popup direction="center" :duration="duration" :visible="visibleSync" :enableMaskClickHide="enableMaskClickHide" @hide="hide">
		<view class="com-modal y-flex" :style="{'background-color': bgColor, 'border-radius': pixelunit(radius)}">
			<com-text class="pt-40 pr-40 pl-40 pb-40" align="start" :lines="1" v-if="title" size="36" weight="bold" :color="titleColor" :value="title"/>
			<scroll-view :style="{'max-height': pixelunit(maxHeight), flex: 1, overflow: 'hidden'}" scroll-y="true">
				<view class="com-modal-content y-flex">
					<slot name="content">
						<com-text size="30" :color="contentColor" :value="content" />
					</slot>
				</view>
			</scroll-view>
			<view v-if="confirmShow || cancelShow"
			class="com-modal-btns y-flex y-row y-align-center y-justify-end mr-40">
				<slot name="button">
					<com-text class="com-modal-btn" size="32" :color="cancelColor" :value="cancelText" v-if="cancelShow" @click="handleCancel" />
					<com-text class="com-modal-btn ml-30" size="32" :color="confirmColor" :value="confirmText" v-if="confirmShow" @click="handleConfirm" />
				</slot>
			</view>
		</view>
	</com-popup>
</template>

<script>
	export default {
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			title: {
				type: String,
				default: ''
			},
			content: {
				type: String,
				default: ''
			},
			confirmText: {
				type: String,
				default: '确认'
			},
			cancelText: {
				type: String,
				default: '取消'
			},
			confirmShow: {
				type: Boolean,
				default: true
			},
			cancelShow: {
				type: Boolean,
				default: true
			},
			duration: {
				type: Number,
				default: 200
			},
			titleColor: {
				type: String,
				default: '#333'
			},
			contentColor: {
				type: String,
				default: '#666'
			},
			confirmColor: {
				type: String,
				default: '#21C088'
			},
			cancelColor: {
				type: String,
				default: '#999'
			},
			bgColor: {
				type: String,
				default: '#fff'
			},
			maxHeight: {
				type: [Number, String],
				default: 800
			},
			radius: {
				type: [Number, String],
				default: 10
			},
			//开启遮罩层点击关闭
			enableMaskClickHide: {
				type: Boolean,
				default: true
			}
		},
		data () {
			return {
				visibleSync: false
			}
		},
		created() {
			this.visibleSync = this.visible
		},
		methods: {
			hide () {
				this.$emit('hide')
				this.$emit('update:visible', false)
			},
			handleCancel () {
				this.$emit('cancel')
				this.visibleSync = false
			},
			handleConfirm () {
				this.$emit('confirm')
				this.visibleSync = false
			},
			pixelunit (size) {
				const text = size.toString()
				return text.indexOf('px') > -1 ? text : text + 'rpx'
			}
		},
		watch: {
			visible (newVal) {
				this.visibleSync = newVal
			}
		}
	}
</script>

<style scoped>
	.com-modal {
		width: 650rpx;
	}
	.com-modal-content {
		padding-left: 40rpx;
		padding-right: 40rpx;
		padding-bottom: 40rpx;
	}
	.com-modal-btns {
		height: 100rpx;
	}
	.com-modal-btn:active {
		opacity: 0.5;
	}
</style>
